<script setup lang="ts">
//引入router相关
import { useRouter, useRoute } from 'vue-router'
//引入elemnent-plus i18n相关，组件内部中英文切换
import { zhCn, en } from 'element-plus/es/locales.mjs'

//本地变量接收any类型的参数定义，代替this=>getCurrentInstance()
import { ref, getCurrentInstance, h } from 'vue'

//引入i18n
import { useI18n } from 'vue-i18n'

//引入接口
import api from '@/api/index.ts'

//引入组件
import MainHeader from '@/components/MainHeader.vue'
import MainNav from '@/components/MainNav.vue'
import MainFooter from '@/components/MainFooter.vue'
import LoginDialog from '@/components/LoginDialog.vue'

//引入vuex全局状态更新store
// import { useStore } from 'vuex'
import { useStore } from '@/store/index.ts'
const store=useStore()

//全局调用$message
const { proxy }: any = getCurrentInstance()

const router = useRouter()
const route = useRoute()
const date = new Date()
//element-plus给本地语言默认为中文
const locale = ref(zhCn)
//使用i18n的t作为页内标题转换
const { t } = useI18n()
//页面自定义语言：调用本地i18n的参数
const { locale: localeLan } = useI18n()

//缓存引入
import {sessionCache,localCache} from '@/utils/cache.ts'

const langChange = (lang: any) => {
  let message = '切换语言成功'
  let toast = '中文站 CN'

    if (lang) {
        console.log("langL ", lang)
        
        if(lang=='Zh'){
          locale.value=zhCn
          localeLan.value='zh'
          toast = '中文站 CN'
        }else{
          locale.value=en
          localeLan.value='en'
          toast = '国际站 EN'
        }

        //保存缓存
        saveUserLanguage(lang,locale)

        proxy.$message({
            message: h('p', null, [
                h('span', null, message),
                h('i', { style: 'color: #0e42a3b0' }, toast)
            ])
        })
    }
}

// TODO 保存用户当前语言
function saveUserLanguage(lang:string,locale:any){
  console.log("更新语言：",lang)
  store.dispatch('saveLanguage',lang,locale)
  // localCache.setCache('userLang',lang)
}

//请求接口
let siteInfo: any = []
const getLeaderInfo = () => {
  proxy.$loading()
    api.getMainInfo({}).then((res: any) => {
        console.log("leader info: ", res)
        if (res.responseData?.length > 0) {
            // TODO 这里有坑，获取数据后，无法实时更新  
            siteInfo = res.responseData
            console.log("siteInfo: ", siteInfo)
            // setTimeout(()=>{
            //   proxy.$loading().close()
            // },500)
            proxy.$loading().close()
            proxy.$message({
            message: h('p', null, [
                h('span', null, '获取数据成功，站长为：'),
                h('i', { style: 'color: #0e42a3b0' }, siteInfo[0]?.name)
            ])
        })
        }
    })
}

/*************登录**************/
const loginComp=ref<InstanceType<typeof LoginDialog>>()
let showLogin=ref(false)
function toLogin(){
  console.log("打开登录")
  showLogin.value=true
}

function resetLogin(val:any){
  showLogin.value=false
}

const mainNav=ref<InstanceType<typeof MainNav>>()

function loginSuccess(val:any){
  showLogin.value=false
  console.log("登录成功: ",val)
}

function logout(){
  console.log("已退出登录")
}

getLeaderInfo()
</script>

<template>
    <!-- <div class="pageload">
        <div class="content">
            <div class="rond-box">
                <div class="rond">
                    <div class="runner sz-imooc"></div>
                </div>
                <div class="text">加载中...</div>
            </div>
        </div>
    </div> -->
    <div class="appBox">
        
        <el-config-provider :locale="locale">
        <!-- <el-config-provider :locale="store.state.locale"> -->
          <div class="commonHeader">
            <MainHeader ref="mainHeader" class="mainHeader" @langChange="langChange"></MainHeader>
            <MainNav ref="mainNav" :language="locale" class="mainNav" @toLogin="toLogin" @logout="logout"></MainNav>
          </div>

          <div class="mainContainer">
            <router-view ></router-view>
          </div>

          <MainFooter :language="locale" ref="mainFooter" class="mainFooter"></MainFooter>
          
          <LoginDialog ref="loginDialog" :language="locale" :showLogin="showLogin" @resetLogin="resetLogin" @loginSuccess="loginSuccess"></LoginDialog>

          <!-- <div class="testInfo">
            <div class="langBox">
              <h1>{{ t('message.title') }}</h1>
            </div>
          </div> -->
          

        </el-config-provider>
    </div>
    
    
</template>

<style lang="scss" scoped>
@import '@/assets/sass/index.scss';
@import '@/assets/sass/common.scss';

.appBox{
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  position: relative;
}
.commonHeader{
  
  width: 100%;
  height: 100%;
  .mainHeader{
    position: fixed;
    left: 0;
    top: 0;
    z-index: 10;
  }
  .mainNav{
    position: fixed;
    left: 0;
    top: 40px;
    z-index: 9;
  }
}
.mainFooter{
  width: 100%;
  height: 100%;
  position: relative;
  // margin-top: 150px;
}
.mainContainer{
  margin-top: 150px;
}

.testInfo{
  position: relative;
  margin-top: 120px;
}
</style>
<style lang="scss">
:root {
  --el-color-primary: rgba(14, 66, 163, 0.69) !important;
  --el-color-danger: #e92322 !important;
  --el-font-size-base: 16px !important;
}
.el-dialog{
  border-radius: 20px !important;
}
.el-overlay{
  // background-color: rgba(0,0,0,0.4) !important;
}
</style>
